<template>
  <div class="report-upload">
    <h2>上传实验报告</h2>
    <input type="file" @change="onFileChange" accept=".docx, .pdf" />
    <button @click="uploadReport" :disabled="!selectedFile" :style="{ backgroundColor: selectedFile ? 'green' : 'gray' }">
      上传报告
    </button>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null,
      message: ''
    };
  },
  methods: {
    onFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadReport() {
      if (!this.selectedFile) {
        this.message = '请先选择一个文件';
        return;
      }

      const formData = new FormData();
      formData.append('report', this.selectedFile);

      try {
        const response = await axios.post('/api/reports/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        this.message = response.data.message || '报告上传成功';
      } catch (error) {
        this.message = '上传失败: ' + (error.response.data.message || error.message);
      }
    }
  }
};
</script>

<style scoped>
.report-upload {
  margin: 20px;
}

button:disabled {
  background-color: gray !important; /* 强制覆盖默认样式 */
  cursor: not-allowed;
}

button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  opacity: 0.8; /* 鼠标悬停时的效果 */
}
</style>